<!DOCTYPE html>
<html lang="en">
  <head>
    {% with title="Gradio Guides", url="https://gradio.app/guides", image="/assets/img/meta-image.png", description="Step-by-Step Gradio Tutorials" %}
      {% include "templates/meta.html" %}
    {% endwith %}
    <link rel="stylesheet" href="/style.css">
    <link rel="stylesheet" href="/assets/prism.css">
  </head>
  <body>
    {% include "templates/navbar.html" %}
    <div class="container mx-auto px-4 relative pt-8 mb-12">
      <input id="search-by-tag"
             type="text"
             class="w-full border border-gray-200 p-1 rounded-full outline-none text-center text-lg mb-1 focus:placeholder-transparent focus:shadow-none focus:border-orange-500 focus:ring-0"
             placeholder="What do you want to build?"
             autocomplete="off"
             onkeyup="search(this.value);"/>
      <div class="text-gray-600 mb-6 mx-auto w-fit text-sm">
        Search through
        <span id="counter">{{ guides|length }}</span>
        Guides. <a class="link text-gray-600"
    href="https://github.com/gradio-app/gradio/tree/main/guides">Contribute here</a>
      </div>
      {% for category_guides in guides_by_category %}
        <div class="category mb-8">
          <h2 class="mb-4 text-2xl font-thin block">{{ category_guides["category"] }}</h2>
          <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {% for guide in category_guides["guides"] %}
              <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r"
                name="{{ guide.name }}"
                href="/{{ guide.name }}">
                <div class="flex flex-col p-4 h-min">
                  <h2 class="group-hover:underline text-lg">{{ guide.pretty_name }}</h2>
                  <div class="tags-holder">
                    {% if guide.tags is not none %}
                      <p class="text-gray-600"><!--
                        -->{% for tag in guide.tags %}<!--
                          -->{{ tag }}<!--
                          -->{% if not loop.last %}, {% endif %}<!--
                        -->{% endfor %}<!--
                    --></p>
                    {% endif %}
                  </div>
                </div>
              </a>
            {% endfor %}
          </div>
        </div>
      {% endfor %}
      <div class="no-guides hidden text-center text-xl text-gray-500">
        <p class="mb-4">Sorry, we couldn't find a guide :(</p>
        <p>
          Try a different term, or <a class="link" href="/docs">see the docs</a>
        </p>
      </div>
    </div>
    {% include 'templates/footer.html' %}
    <script>
    {% include 'templates/guide-color.js' %}
    </script>
    <script>
    const guides = {{ guides|tojson }};
    const search = query => {
      if (query.length > 0) {
        query = query.toLowerCase();
        var filtered_guides = guides
          .filter(guide => 
            guide.name.toLowerCase().includes(query) || guide.content.toLowerCase().includes(query))
          .map(guide => guide.name)
      } else {
        var filtered_guides = guides.map(guide => guide.name);
      }      
      if (filtered_guides.length === 0) {
        document.querySelector(".no-guides").classList.remove("hidden");
      } else {
        document.querySelector(".no-guides").classList.add("hidden");
      }
      document.querySelectorAll(".guide-box").forEach(guide => {
        if (filtered_guides.includes(guide.getAttribute("name"))) {
          guide.classList.remove("hidden");
        } else {
          guide.classList.add("hidden");
        }
      })
      document.querySelectorAll(".category").forEach(category => {
        if (category.querySelectorAll(".guide-box:not(.hidden)").length === 0) {
          category.classList.add("hidden");
        } else {
          category.classList.remove("hidden");
        }
      })
    }
    </script>
  </body>
</html>
